<script setup>
import { ref, watch } from 'vue'
import { getMemberByIdService } from '@/api/member.js'

const props = defineProps({
  memberId: {
    type: Number,
    required: true
  }
})

// 会员等级、用户状态与el-tag类型映射
const memberLevelTagTypeMap = {
  普通: 'info',
  银卡: 'primary',
  金卡: 'warning',
  至尊: 'danger'
}
const userStatusTagTypeMap = {
  启用: 'success',
  禁用: 'danger'
}
const getMemberLevelTagType = (level) => {
  return memberLevelTagTypeMap[level] || 'info'
}
const getUserStatusTagType = (status) => {
  return userStatusTagTypeMap[status] || 'info'
}

// 获取会员信息
const memberInfo = ref({})
const getMemberById = async (id) => {
  const res = await getMemberByIdService(id)
  memberInfo.value = res.data.data
}

// 监听 memberId 的变化，当 memberId 变化时重新获取会员信息
watch(
  () => props.memberId,
  (newId) => {
    if (newId) {
      getMemberById(newId)
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-form :model="memberInfo" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="会员ID">
          <el-tag type="info">{{ memberInfo.id }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="姓名">
          <el-tag type="info">{{ memberInfo.name }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="性别">
          <el-tag type="info">{{ memberInfo.gender ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="年龄">
          <el-tag type="info">{{ memberInfo.age ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="移动电话">
          <el-tag type="info">{{ memberInfo.mobilePhone }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号码">
          <el-tag type="info">{{ memberInfo.idNumber }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="电子邮箱">
          <el-tag type="info">{{ memberInfo.email ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="地址">
          <el-tag type="info">{{ memberInfo.address ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="会员等级">
          <el-tag :type="getMemberLevelTagType(memberInfo.level)">{{ memberInfo.level }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会员积分">
          <el-tag type="info">{{ memberInfo.points }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="账户余额">
          <el-tag type="info">{{ (memberInfo.balance / 100).toFixed(2) }}元</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务总次数">
          <el-tag type="info">{{ memberInfo.totalServicesCount }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上次服务时间">
          <el-tag type="info">{{ memberInfo.lastServiceTime ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户状态">
          <el-tag :type="getUserStatusTagType(memberInfo.status)">{{ memberInfo.status }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-tag type="info">{{ memberInfo.createTime }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新时间">
          <el-tag type="info">{{ memberInfo.updateTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
